import { Form,  Button,  DatePicker, Input, Space} from 'antd'
import { SearchOutlined, ReloadOutlined } from '@ant-design/icons'
import locale from 'antd/es/date-picker/locale/zh_CN'
import { searchs } from '@/static/search';
import {useState, useEffect} from 'react'
import SelectOption from '@/components/SelectOption'


const { RangePicker } = DatePicker


function SearchComponent(props){
  const [form] = Form.useForm()
  const {api, setRequestParams} = props

  const searchForm = searchs[api] ? searchs[api] : []
  const [selectValue, setSelectValue] = useState()

  const onFinish = (value) => {
    if(value.date && value.date.length === 2){
      const startDate = value.date[0].format('YYYY-MM-DD')
      const endDate = value.date[1].format('YYYY-MM-DD')
      delete value.date
      value["create_at-gt"] = startDate
      value["create_at-lt"] = endDate
    }
    value["current"] = 1
    value["pageSize"] = 10
    const params = {
      ...value,
      ...selectValue
    }
    setRequestParams(params)
    
  }

  const onReset = (value) => {
    setRequestParams(undefined)
    setSelectValue(undefined)
    form.resetFields()
  }

  useEffect(() => {
    setRequestParams(undefined)
    setSelectValue(undefined)
    form.resetFields()
  }, [api])

  return(
      <Form 
          layout="inline"
          form={form}
          initialValues={{ status: null }}
          onFinish={onFinish}>
          {searchForm.map(item => {
              if(item.form.type === "Select"){
                  return <Form.Item
                          key={item.name}
                          label={item.label}
                          name={item.name}
                          rules={item.rules}
                          className={item.className}
                        >
                          <SelectOption item={item} selectValue={selectValue} setSelectValue={setSelectValue}/>
                        </Form.Item>
              }else if(item.form.type === "DatePicker"){
                  return <Form.Item
                              key={item.name}
                              label={item.label}
                              name={item.name}
                              rules={item.rules}
                              className={item.className}  
                          >
                              <DatePicker locale={locale} 
                                          style={item.form.style}  
                                          format={item.form.format}
                                          showTime={item.form.showTime} />
                          </Form.Item>
              }else if(item.form.type === "RangePicker"){
                  return <Form.Item
                              key={item.name}
                              label={item.label}
                              name={item.name}
                              rules={item.rules}
                              className={item.className}
                          >
                              <RangePicker locale={locale} 
                                            style={item.form.style} 
                                            format={item.form.format}
                                            showTime={item.form.showTime}/>
                  </Form.Item>
              }else{
                  return <Form.Item
                              key={item.name}
                              label={item.label}
                              name={item.name}
                              rules={item.rules}
                              className={item.className}
                          >
                              <Input placeholder={item.placeholder} style={item.form.style} />
                          </Form.Item>
              }
          })}
          <Space size="small">
            <Button type="primary"  icon={<SearchOutlined />} htmlType="submit" > 搜索 </Button>
            <Button type="primary"  icon={<ReloadOutlined />} onClick={onReset} danger>重置</Button>
          </Space>
      </Form>
  )
}

export default SearchComponent 
